import React, { Component, useEffect } from "react";
import {
  createBrowserRouter,
  RouterProvider,
  useParams,
  useSearchParams,
} from "react-router-dom";
import Article from "./components/article";
import News from "./components/news";
import Home from "./components/home";
import NoFount from "./components/noFount.jsx";
function A() {
  /* params参数 */
  let params = useParams();
  console.log(params, "params");
  /* query参数 */
  let [searchParams] = useSearchParams();
  console.log(searchParams.get("name"), searchParams.get("age"), "query参数");
  return (
    <>
      <h1>a文章</h1>
    </>
  );
}
function B() {
  /* params参数 */
  let params = useParams();
  console.log(params, "params");
  /* query参数 */
  let [searchParams] = useSearchParams();
  console.log(searchParams.get("name"), searchParams.get("age"), "query参数");
  return (
    <>
      <h1>b文章</h1>
    </>
  );
}

let router = createBrowserRouter([
  {
    path: "/article",
    element: <Article></Article>,
    children: [
      {
        // path: "/article/a/:id",
        index: true,
        /* 
          当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true
        */
        element: <A></A>,
      },
      {
        path: "/article/b/:id",
        element: <B></B>,
      },
    ],
  },
  {
    path: "/news",
    element: <News></News>,
  },
  {
    path: "/home",
    element: <Home></Home>,
  },
  {
    path: "*",
    element: <NoFount></NoFount>,
  },
]);

export default function Router() {
  return (
    <>
      <h1>路由的使用方式</h1>
      <RouterProvider router={router}></RouterProvider>
    </>
  );
}
